import React, { memo } from "react";
import sty from "./sty.module.css";
import { getSongDetail } from "@/pages/player/store/actionCreator";
import { useDispatch } from "react-redux";
import { PlayCircleFilled } from "@ant-design/icons";
import cs from "classnames";
import { Link } from "react-router-dom";
import propTypes from "prop-types";
const SongItem = (props) => {
  const { coverPic, songId, songName, singer } = props;
  const diapatch = useDispatch();
  const playMusic = () => {
    diapatch(getSongDetail(songId));
    document.getElementById("audio").autoplay = true;
  };
  return (
    <li className="flex2">
      <Link
        to={`/song?id=${songId}`}
        className={cs(sty.imageWrap, "song-item")}
      >
        <img src={coverPic} alt="" />
      </Link>
      <div className={sty.leftInfo}>
        <div className={sty.info}>
          <PlayCircleFilled className={sty.fontActive} onClick={playMusic} />
          <Link to={`/song?id=${songId}`} className="txt1">
            {songName}
          </Link>
        </div>
        <Link to={`/song?id=${songId}`} className="txt1">
          {singer}
        </Link>
      </div>
    </li>
  );
};
SongItem.propTypes = {
  coverPic: propTypes.string.isRequired,
  songId: propTypes.number.isRequired,
  songName: propTypes.string.isRequired,
  singer: propTypes.string.isRequired,
};
export default memo(SongItem);
